<template>
  <div class="w-100" style="height: 100%">
    <div
      id="gdt"
      class="w-100"
      style="height: 100%; position: relative"
    ></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const props = defineProps({

  trafficWay:{
    type:Array,
    default:()=>[]
  }
});
let option = {
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'shadow'
      }
  },
  legend: {
      data: ['项目进度']
  },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
  },
  yAxis: {
      type: 'category',
      data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  series: [
      {
          name: '项目进度',
          type: 'bar',
          data: [
              {value: 90, itemStyle: {color: '#5470c6'}},
              {value: 60, itemStyle: {color: '#91cc75'}},
              {value: 70, itemStyle: {color: '#fac858'}},
              {value: 87, itemStyle: {color: '#ee6666'}},
              {value: 123, itemStyle: {color: '#73c0de'}},
              {value: 72, itemStyle: {color: '#3ba272'}},
              // ... 其他月份的数据
          ]
      }
  ]
};

onMounted(() => {


  let myChart = echarts.init(
    document.getElementById("gdt") as HTMLElement
  );

  myChart.setOption(option);
});
</script>

<style></style>
